<!DOCTYPE html>
<html lang="zh-CN" class=" ">
	<head>
		<meta charset="utf-8">
		<title>多店铺客服平台</title>
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="applicable-device" content="pc">
		<link rel="stylesheet" type="text/css" href="__STATIC__/plugins/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="__STATIC__/customer/css/services.css?v=201912192019">
	</head>
	<body>

		<div class="content">
			<div class="tops">
				<a href="/" target="new">
					<img src="{:get_file_url(config('web_site_logo'))}" alt="">
				</a>
				<h1>客服管理系统</h1>
				<!-- <a href="{:url('customer/login/signout')}" style="margin-left: auto" class="btn btn-default btn-flat">退出</a> -->
				<a href="{:url('customer/login/signout')}" style="margin-left: auto">
					<img src="__STATIC__/customer/images/bg-quit.png" alt="" class="quit">
				</a>
			</div>
			<table class="table table-bordered">
				<tr class="first-tr">
					<td>
						<div class="top-tit">
							<img src="__STATIC__/customer/images/chat1.png" alt="" style="width: 30px;height: 30px;">
							<span>对话平台</span>
						</div>
					</td>
					<!-- <td>
						<h4>客服专用名称</h4>
					</td>
					<td>

					</td> -->
				</tr>
				<tr>
					<td class="users-box">
						<ul class="nav nav-tabs nav-justified" data-users>
							<li class="active"><a href="#user1" data-toggle="tab">服务中</a></li>
							<li><a href="#user2" data-toggle="tab">离线消息</a></li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane fade  in active" id="user1">
								<div class="users line">
									<ul>

									</ul>
								</div>
							</div>
							<div class="tab-pane fade" id="user2">
								<div class="users offline">
									<ul>

									</ul>
								</div>
							</div>
						</div>
					</td>
					<td>
						<div class="message-box">
							<div class="avatar" style="display: none;"></div>
							<div class="message scrollbar" style="height: 504px;">
								<ul>

								</ul>
							</div>
						</div>

						<div class="message-input">
							<div class="message-titles">
								<div class="dropup right-btn" style="display:inline-block">
									<a href="javascript:;" class="ropdown-toggle" data-toggle="dropdown"
										aria-haspopup="true" aria-expanded="true">
										<img src="__STATIC__/customer/images/icontitle.png" style="width: 24px;height: 24px;"/>
									</a>
									
									<a href="javascript:;" id="picture">
										<img src="__STATIC__/customer/images/photo.png" style="width: 27px;height: 27px;"/>
										<input type="file"
												accept="image/png,image/jpg" />
									</a>
									<a href="javascript:;" id="video">
										<img src="__STATIC__/customer/images/video.png" style="width: 27px;height: 27px;"/>
										<input type="file" accept="video/mp4" />
									</a>
									<a href="javascript:;" class="ropdown-toggle" data-toggle="dropdown"
										aria-haspopup="true" aria-expanded="true">
										<img src="__STATIC__/customer/images/change.png" style="width: 27px;height: 27px;"/>
									</a>
									<div class="dropdown-menu" aria-labelledby="dropdownMenu1" id="face_list"></div>
								</div>
								<!-- <div class="fr right-btn">
									<a href="javascript:;" id="picture">图片<input type="file"
											accept="image/png,image/jpg" /></a>
									<a href="javascript:;" id="video">视频<input type="file" accept="video/mp4" /></a> -->
									<!--
							<a href="javascript:;" id="goods">商品</a>
							<a href="javascript:;" id="order">订单</a>
							-->
								<!-- </div> -->
							</div>
							<div class="message-txtarea">

								<textarea class="message-txtarea-input scrollbar" ></textarea>

								<div class="message-txtarea-btn">
									<div class="fl public-message alert-danger"><span></span></div>
									<a href='javascript:;' class="btn-ss btn-info fr btn-xs" id="submit" style="text-decoration:none" title="Ctrl+Enter换行；Enter发送">发送</a>
								</div>

							</div>

						</div>

					</td>
					<td class="tabs-right">
						<ul class="nav nav-tabs nav-justified">
							<!-- <li class="active"><a href="#tab3" data-toggle="tab">店铺设置</a></li> -->
							<li class="active"><a href="#tab4" data-toggle="tab">访客信息</a></li>
							<li class=""><a href="#tab5" data-toggle="tab">用户订单</a></li>
							<li class=""><a href="#tab6" data-toggle="tab">用户足迹</a></li>
							<li class=""><a href="#tab7" data-toggle="tab">常用语</a></li>
						</ul>
						<!--  <div class="tab-content">
                        <div class="tab-pane fade in active" id="tab3">
                            <ul class="services">
                                {volist name="$stores" id="item"}
                                    <li >
                                        <img src="{$item.store_logo|get_file_url}" onerror="this.src='__STATIC__/customer/images/face.png'">
                                        <div class="name">{$item.store_name} <span class="label label-info">{$serviceStatus[$item.status] ?? "下线"}</span></div>      																			
										<div class="links" store_id="{$item.store_id}">设置</div>
                                    </li>
                                {/volist}
                            </ul>
                        </div>
                    </div> -->
						<div class="tab-content tab-contents">
							<div class="tab-pane fade in active bg" id="tab4">
								<p class="username">用户信息</p>
								<ul class="userdesc">
									<li>
										ID:<span class="right-id"></span>
									</li>
									<li>
										昵称:<span class="right-username"></span>
									</li>
									<li>
										手机:<span class="right-usermobile"></span>
									</li>
                                    <li>
										IP:<span class="right-ip"></span>
									</li>
									<li>
										其它:如需展示其他信息，请联系技术支持
									</li>
								</ul>
							</div>
						
							
							<div class="tab-pane fade in order_list bg" id="tab5" style="overflow-y: auto;height: 100%;">
								
							</div>
							<div class="tab-pane show_goods_list fade in bg" style="overflow-y: auto;height: 100%;" id="tab6">
								
								
							</div>
							<div class="tab-pane fade in bg" style="overflow-y: auto;height: 100%;" id="tab7">
								<div class="message_item" ><span class="messageitem_title">常用语: </span><span class="desc">你好，请问看上哪款商品了？</span></div>
								
								<div class="message_item"><span class="messageitem_title">常用语: </span><span class="desc">你好，欢迎光临！</span></div>
								<div class="message_item" ><span class="messageitem_title">常用语: </span><span class="desc">亲亲，实在不好意思，给您带来不好的购物体验。您看一下快递包装是否破损，我们也好能和快递公司沟通下。如果外包装破损了，麻烦您拍个照片给我哦~ 如果快递外包装没有破损，那就可能是快递运输过程中扔的，挤压到书籍了。您看下书的内页有无问题，是否影响使用呢？如果影响使用了，我这边今天给安排补发一本。如果您觉得内页还可以，不是特别影响使用，我这边给您赔偿几元钱，您看可以吗？</span></div>
							</div>
						</div>
					</td>
				</tr>
			</table>
			<!-- 图片弹窗 -->
			<div class="alt_img" id="showImageView">
				<div class="alt_img_title imgClose"><img src="__STATIC__/customer/images/clear.png" alt=""></div>
				<div class="bit_img imgView scrollbar"><img src="__STATIC__/customer/images/clear.png" alt=""></div>
			</div>

		</div>



		<script type="text/javascript" src="__STATIC__/plugins/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="__STATIC__/plugins/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="__STATIC__/plugins/layer/layer.js"></script>
		<script type="text/javascript" src="__STATIC__/customer/js/service.js"></script>
		<script type="text/javascript" src="__STATIC__/customer/js/service_chat.js"></script>
		<script src="__STATIC__/plugins/socket-io/socket.io.js"></script>
		<script src="__STATIC__/customer/face/face.js"></script>
		<script src="__STATIC__/customer/notify/notify.min.js"></script>
		<script>
			$(".message-box .message").height($(".message-box .message").height());
			ShopsFace.init({
				faceListId: "#face_list",
				iconPath: "__STATIC__/customer/face/icons/",
				inputId: ".message-txtarea-input"
			})
			sockets.client("{$userSig.wss_socket_url ?: $userSig.socket_url}", {
				uid: '{$userSig.uid}',
				userSig: '{$userSig.userSig}',
				'service': "1"
			}, '{$upToken}');
			
			function showcut(obj) {
			    $(obj).children('span').removeClass('hide');
			}
			
			function hidecut(obj) {
			    $(obj).children('span').addClass('hide');
			}
		</script>
	</body>
</html>
